<!DOCTYPE html>
<html>
<head>
    <title>欢迎页</title>
    #parse("sys/header.html")
</head>
　 <style scoped="scoped">
    .card-big-font {
        font-size: 36px;
        color: #666;
        line-height: 36px;
        padding: 5px 0 10px;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
        margin-bottom: 5px;
    }

    .card-span-color {
        position: absolute;
        right: 15px;
    }
</style>
<style type="text/css">
    body{background-image: url(${rc.contextPath}/statics/img/nybj.png);background-size:100% 100%;font-weight:bold;font-family:苹方;overflow: hidden;}
    .main{width:1024px;height:768px;position:relative;margin:auto;}
    div{border:0px solid white;margin:1px;}
    .layer{position:relative;width:100%;}
    #layer01{}
    #layer01 img{text-align: center;display: block;height: 35px;padding-top: 35px;margin: auto;}
    #layer02 > div{height:100%;float:left;position:relative;}
    .layer02-data{position: absolute;width: auto;height: 100px;color: white;top: 45px;left: 65px;}
    .layer03-panel{height:100%;position:relative;float:left;}
    .layer03-left-label{position:absolute;text-align: center;}
    #layer03_left_label01{top:10px;left:10px;color:white;height:20px;width:200px;font-weight: bold;}
    #layer03_left_label02{right:10px;top:10px;color:#036769;height:20px;width:200px;}
    .layer03-left-chart{position:relative;float:left;height:100%;}
    #layer03_right_label{position:absolute;top:10px;left:10px;color:white;height:20px;width:100px;}
    .layer03-right-chart{position:relative;float:left;height:100%;width:32%;}
    .layer03-right-chart-label{color: white;text-align: center;position: absolute;bottom: 60px;width: 100%;}
    .layer04-panel{position:relative;float:left;height:100%;width:48%;}
    .layer04-panel-label{width:100%;height:15%;color:white;padding-top:5px;}
    .layer04-panel-chart{width:100%;height:85%;}
</style>
<script src="${rc.contextPath}/statics/plugins/echarts/echarts.min.js"></script>
<script src="${rc.contextPath}/statics/plugins/echarts/monitor.js"></script>
<body>
<div class="wrapper wrapper-content  animated fadeInRight">

    <div class="main">

        <div id="layer02" class="layer" style="height:15%;">
            <div id="layer02_00" style="width:20%;">
                <div class="layer02-data">
                    <span style="font-size:26px;" id="todayOrder">12</span>
                    <span style="font-size:16px;">单</span>
                </div>
                <canvas width="200" height="100"></canvas>
            </div>
            <div id="layer02_01" style="width:20%;">
                <div class="layer02-data">
                    <span style="font-size:26px;" id="monthsOrder">355</span>
                    <span style="font-size:16px;">单</span>
                </div>
                <canvas width="200" height="100"></canvas>
            </div>
            <div id="layer02_02" style="width:23%;">
                <div class="layer02-data">
                    <span style="font-size:26px;" id="monthsQouta">314580</span>
                    <span style="font-size:16px;">元</span>
                </div>
                <canvas width="200" height="100"></canvas>
            </div>
            <div id="layer02_03" style="width:28%;">
                <div class="layer02-data">
                    <span style="font-size:26px;" id="allQouta">5430750</span>
                    <span style="font-size:16px;">元</span>
                </div>
                <canvas width="200" height="100"></canvas>
            </div>

        </div>
        <div id="layer03" class="layer" style="height:43%;">
            <div id="layer03_left" style="width:48%;" class="layer03-panel">
                <div id="layer03_left_label01" class="layer03-left-label" style="width: 490px;">热门产品占比</div>
                <!--
                <div id="layer03_left_label02" class="layer03-left-label">(左)在线数量 (右)上线率</div>
                -->
               <!-- <div id="layer03_left_01" class="layer03-left-chart" style="width:16%;">
                    <canvas width="100" height="200" style="margin:30px 0 0 20px;"></canvas>
                </div>-->

                <div id="layer03_left_02" class="layer03-left-chart" style="width: 100%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1581077768797"><div style="position: relative; overflow: hidden; width: 393px; height: 307px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="900" height="614" style="position: absolute; left: 0px; top: 0px; width: 393px; height: 307px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div>
                <!--
                <div id="layer03_left_03" class="layer03-left-chart" style="width:80%;"></div>
                -->
            </div>
            <div id="layer03_right" style="width:50%;" class="layer03-panel">
                <div id="layer03_right_label">进度占比</div>
                <div id="layer03_right_chart01" class="layer03-right-chart">
                    <canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>
                    <div class="layer03-right-chart-label">贷款完成</div>
                </div>
                <div id="layer03_right_chart02" class="layer03-right-chart">
                    <canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>
                    <div class="layer03-right-chart-label">放款中</div>
                </div>
                <div id="layer03_right_chart03" class="layer03-right-chart">
                    <canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>
                    <div class="layer03-right-chart-label">未贷款</div>
                </div>
            </div>
        </div>
        <div id="layer04" class="layer" style="height:40%;">
            <div id="layer04_left" class="layer04-panel">
                <div id="layer04_left_label" class="layer04-panel-label">30天日订单趋势</div>
                <div id="layer04_left_chart" class="layer04-panel-chart" _echarts_instance_="ec_1581077768798" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 492px; height: 195px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="984" height="390" style="position: absolute; left: 0px; top: 0px; width: 492px; height: 195px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div>
            </div>
            <div id="layer04_right" class="layer04-panel">
                <div id="layer04_right_label" class="layer04-panel-label">
                    <span>贷款金额/</span><span style="color:#00A09A;">近半年</span>
                </div>
                <div id="layer04_right_chart" class="layer04-panel-chart" _echarts_instance_="ec_1581077768799" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 492px; height: 195px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="984" height="390" style="position: absolute; left: 0px; top: 0px; width: 492px; height: 195px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div>
            </div>
        </div>
    </div>


</div>


</body>

</html>

<script type="text/javascript">
    $(function(){
        drawLayer02Label($("#layer02_00 canvas").get(0),"今日任务数量",80,200);
        drawLayer02Label($("#layer02_01 canvas").get(0),"月任务总数",80,300);
        drawLayer02Label($("#layer02_02 canvas").get(0),"月贷款总额",80,400);
        drawLayer02Label($("#layer02_03 canvas").get(0),"总贷款金额",80,500);

        //获取顶部的数据统计
        Ajax.request({
            url: "../index/main/orderCount",
            params: {},
            contentType: "application/json",
            type: 'POST',
            successCallback: function (result) {
                if (result.code == 0) {
                    var map= result.result;
                    var todayOrder= map.todayOrder;
                    var monthsOrder= map.monthsOrder;
                    var monthsQouta= map.monthsQouta;
                    var allQouta= map.allQouta;

                    $("#todayOrder").html(todayOrder);
                    $("#monthsOrder").html(monthsOrder);
                    $("#monthsQouta").html(monthsQouta);
                    $("#allQouta").html(allQouta);

                } else {
                    layer.alert(result.msg);
                }
            }
        });

        //renderLegend();

        //饼状图
        Ajax.request({
            url: "../index/main/productCount",
            params: {},
            contentType: "application/json",
            type: 'POST',
            successCallback: function (result) {
                if (result.code == 0) {
                    var list= result.result;
                    renderChartBar01(list);

                } else {
                    layer.alert(result.msg);
                }
            }
        });


        //renderChartBar02();

        //进度
        Ajax.request({
            url: "../index/main/processCount",
            params: {},
            contentType: "application/json",
            type: 'POST',
            successCallback: function (result) {
                if (result.code == 0) {
                    var list= result.result;
                    renderLayer03Right(list);
                } else {
                    layer.alert(result.msg);
                }
            }
        });


        //趋势
        renderLayer04Left();

        //业务员对比
        renderLayer04Right();
    });
</script>